<template>
  <div class="person_homeView">
    <el-card class="top_nav" :shadow="shadowShow">
      <div class="top_nav_inner">
        <div class="top_nav_left">
          <el-form label-width="100px" :inline="true" :size="optionButtonSize">
            <el-form-item>
              <el-input v-model="form.name" clearable placeholder="请输入机构名称/联系人/联系方式" style="width: 300px">
                <!-- <i slot="suffix" class="el-input__icon el-icon-search" style="color:#003E67;"></i> -->
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-date-picker v-model="dataTime" value-format="yyyy-MM-dd" type="daterange" range-separator="~"
                :start-placeholder="$t('data.data2')" :end-placeholder="$t('data.data3')" />
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.delFlag" style="width: 150px" clearable :placeholder="$t('add.add080')">
                <el-option v-for="item in usageStatusDic" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.auditStatus" style="width: 150px" clearable :placeholder="$t('add.add081')">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :size="optionButtonSize" @click="getPatientList">{{
                $t('add.add123')
              }}</el-button>
              <el-button plain :size="optionButtonSize" @click="resetClick">{{
                $t('add.add124')
              }}</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="top_nav_right">
          <el-button type="primary" :size="optionButtonSize" @click="add">{{
            $t('add.add54')
          }}</el-button>
          <!-- <el-button plain :size="optionButtonSize">{{ $t('add.add020') }}</el-button>
                    <el-button plain :size="optionButtonSize">导出</el-button> -->
        </div>
      </div>
    </el-card>
    <el-card :shadow="shadowShow" class="partner_inner">
      <el-table :data="tableData" style="width: 100%" size="mini" :header-cell-style="headercellstyle">
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column align="center" prop="name" label="技工所名称" />
        <el-table-column align="center" prop="address" :label="$t('institutionSetting.jigou10')" />
        <el-table-column align="center" prop="contact" :label="$t('institutionSetting.jigou12')" />
        <el-table-column align="center" prop="mobile" :label="$t('institutionSetting.jigou14')" />
        <!-- <el-table-column align="center" prop="status" label="状态"></el-table-column> -->
        <el-table-column align="center" prop="creatorName" :label="$t('add.add133')" />
        <el-table-column align="center" prop="createDate" :label="$t('add.add134')" width="160" />

        <!-- 使用状态 -->
        <el-table-column align="center" prop="delFlag" :label="$t('add.add082')">
          <template slot-scope="scope" style="display: flex; justify-content: flex-start">
            <span v-if="scope.row.delFlag == 0">{{ $t('institutionSetting.jigou104') }}</span>
            <span v-if="scope.row.delFlag == 1">{{ $t('institutionSetting.jigou103') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="auditStatus" label="审核状态">
          <template slot-scope="scope" style="display: flex; justify-content: flex-start">
            <span v-if="scope.row.auditStatus == 0">{{ $t('add.add018') }}</span>
            <span v-if="scope.row.auditStatus == 1">已通过</span>
            <span v-if="scope.row.auditStatus == 2">未通过</span>
            <span v-if="scope.row.auditStatus == 3">待申请</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('add.add131')" width="260">
          <template slot-scope="scope" style="display: flex; justify-content: flex-start">
            <el-dropdown v-if="scope.row.auditStatus == 0" size @command="handleCommand">
              <span class="el-dropdown-link">
                {{ $t('members.chengyuan24') }}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="beforeHandleCommand(scope.row.id, 'a')">通过</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.row.id, 'b')">{{
                  $t('partner.hezuo16')
                }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button type="text" :size="tableButtonSize" @click="toDetail(scope.row.id)">{{
              $t('add.add132')
            }}</el-button>
            <el-button type="text" :size="tableButtonSize" @click="updateItem(scope.row.id)">{{
              $t('patient.huanzhe17')
            }}</el-button>
            <el-button type="text" :size="tableButtonSize" @click="deleteItem(scope.row.id)">{{
              $t('add.add020')
            }}</el-button>

            <el-button v-show="scope.row.delFlag === 1" type="text" :size="tableButtonSize"
              @click="showReason(scope.row)">{{
                $t('institutionSetting.jigou105')
              }}</el-button>
            <!-- <el-button type="text" :size="tableButtonSize">诊所</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 16px 0; float: right">
        <el-pagination background :current-page.sync="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
          :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="600px" @close="close" :close-on-click-modal="false">
      <el-form label-width="180px">
        <el-form-item label="技工所名称" style="margin-bottom: 10px">
          <el-input v-model="form.deptName" :placeholder="$t('add.add148')" style="width: 260px" />
        </el-form-item>
        <el-form-item :label="$t('institutionSetting.jigou43') + '：'" prop="">
          <el-image v-if="form.businessLicenseFile" style="width: 100px; height: 100px; border-radius: 6px"
            :src="form.businessLicenseFile || ''" />
          <el-upload class="upload-demo" action="" accept=".JPG,.PNG,.JPEG,.BMP,.WebP"
            :before-upload="beforeAvatarUpload" :on-change="handleelchange" :auto-upload="false"
            :show-file-list="false">
            <el-button size="small" type="primary">{{
              $t('institutionSetting.jigou44')
            }}</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item style="margin-bottom: 10px" :label="$t('institutionSetting.jigou47')">
          <el-input v-model="form.socialCreditCode" :placeholder="$t('add.add148')" style="width: 260px" />
        </el-form-item>
        <el-form-item :label="$t('institutionSetting.jigou49') + '：'" prop="">
          <el-image v-if="form.medicalLicenseFile" style="width: 100px; height: 100px; border-radius: 6px"
            :src="form.medicalLicenseFile || ''" />
          <el-upload class="upload-demo" action="" accept=".JPG,.PNG,.JPEG,.BMP,.WebP" :on-change="handleelchange2"
            :auto-upload="false" :show-file-list="false">
            <el-button size="small" type="primary">{{
              $t('institutionSetting.jigou50')
            }}</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item style="margin-bottom: 10px" :label="$t('institutionSetting.jigou52')">
          <el-input v-model="form.registerNo" :placeholder="$t('add.add148')" style="width: 260px" />
        </el-form-item>
        <el-form-item :label="$t('institutionSetting.jigou53') + '：'" prop="">
          <el-image v-if="form.statementFile" style="width: 100px; height: 100px; border-radius: 6px"
            :src="form.statementFile || ''" />
          <el-upload class="upload-demo" action="" accept=".JPG,.PNG,.JPEG,.BMP,.WebP" :on-change="handleelchange3"
            :auto-upload="false" :show-file-list="false">
            <el-button size="small" type="primary">{{
              $t('institutionSetting.jigou50')
            }}</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item style="margin-bottom: 10px" :label="$t('institutionSetting.jigou48')">
          <!-- <el-select style="width: 260px;" v-model="value" clearable placeholder="请选择省市区">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select> -->
          <el-input v-model="form.address" placeholder="请输入详细地址" style="width: 260px; margin-top: 6px" />
        </el-form-item>
        <el-form-item style="margin-bottom: 10px" :label="$t('institutionSetting.jigou12')">
          <el-input v-model="form.contact" :placeholder="$t('add.add148')" style="width: 260px" />
        </el-form-item>
        <el-form-item style="margin-bottom: 10px" :label="$t('institutionSetting.jigou14')">
          <el-input v-model="form.mobile" :placeholder="$t('add.add148')" style="width: 260px" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button :size="optionButtonSize" @click="close">{{ $t('add.add203') }}</el-button>
        <el-button :size="optionButtonSize" type="primary" @click="submit">保 存</el-button>
      </span>
    </el-dialog>
    <zsDetail ref="zsDetail" />

    <!-- 解散原因弹框 -->
    <el-dialog :title="$t('institutionSetting.jigou105')" :visible.sync="dissolutionDialogVisible" width="30%" :close-on-click-modal="false">
      <div class="dissolution_box">
        <p v-for="(item, index) in reasonsImprovements" :key="index">{{ item }}</p>
        <p>
          <span>{{ $t('institutionSetting.jigou101') }}:</span>
          <span>{{ reasonDissolution }}</span>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dissolutionDialogVisible = false">{{ $t('add.add80') }}</el-button>
        <el-button type="primary" @click="dissolutionDialogVisible = false">{{ $t('add.add81') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import zsDetail from './zsDetail.vue';
export default {
  name: 'Home',
  components: {
    zsDetail,
  },

  data() {
    return {
      form: {
        organizedName: '',
        deptName: '',
        socialCreditCode: '',
        registerNo: '',
        address: '',
        contact: '',
        mobile: '',
        businessLicenseFile: '', // 营业执照
        medicalLicenseFile: '', // 医疗机构
        statementFile: '', // 声明函
        name: '',
        // 使用状态
        delFlag: '',
        auditStatus: '',

       
      },
      page: 1, // 默认第1页
      limit: 10, // 每页条数
      total: 0, // 总条数
      tableData: [],
      dialogVisible: false,
      radio: 1,
      // 使用状态字典
      usageStatusDic: [
        {
          label: this.$t('institutionSetting.jigou103'),
          value: 1,
        },
        {
          label: this.$t('institutionSetting.jigou104'),
          value: 0,

        },
      ],
      options: [
        {
          value: '0',
          label: this.$t('add.add018'),
        },
        {
          value: '1',
          label: '已通过',
        },
        {
          value: '2',
          label: '未通过',
        },
        {
          value: '3',
          label: '待申请',
        },
      ],
      value: '',
      title: this.$t('add.add54'),
      isDisabled: false,
      dataTime: [],

      dissolutionDialogVisible: false,
        // 改善原因
        reasonsImprovements: [],
        // 解散原因
        reasonDissolution: ''
    };
  },
  created() {
    this.getList();
  },

  methods: {
    getList() {
      if (!this.dataTime || this.dataTime.length == 0) {
        this.dataTime = ['', ''];
      }
      this.$http
        .get(
          `/sys/organized/list?page=${this.page}&limit=${this.limit}&organizedType=2&name=${this.form.name}&delFlag=${this.form.delFlag}&auditStatus=${this.form.auditStatus}&startTime=${this.dataTime[0]}&endTime=${this.dataTime[1]}`,
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.tableData = res.data.list;
            this.total = res.data.total;
            if (this.tableData.length <= 0 && this.page > 1) {
              this.page -= 1;
              this.getList();
            }
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    add() {
      this.title = this.$t('add.add54');
      this.form.organizedType = 2;
      this.dialogVisible = true;
    },
    updateItem(id) {
      this.$http
        .get(`/sys/organized/getBackDept?deptId=${id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.form = res.data;
            this.title = this.$t('patient.huanzhe17');
            this.dialogVisible = true;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    deleteItem(id) {
      this.$confirm(this.$t('add.add055'), this.$t('add.add140'), {
        confirmButtonText: this.$t('add.add81'),
        cancelButtonText: this.$t('add.add203'),
        type: 'warning',
      })
        .then(async () => {
          this.$http
            .delete(`/sys/organized?id=${id}`)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                this.$message.success(this.$t('add.add66'));
                this.getList();
              }
            })
            .catch((err) => {
              console.log('err', err);
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('add.add145'),
          });
        });
    },

    // 出现解散原因弹框
    showReason(row) {

      this.dissolutionDialogVisible = true;
      // 改善原因
      const segments = row.deleteReason.split('❀');
      // 获取最后一个字符串
      const lastSegment = segments.pop();

      this.reasonsImprovements = segments;
      this.reasonDissolution = lastSegment;

    },
    handleCommand(command) {
      const form = {
        id: command.id,
      };
      if (command.command == 'a') {
        form.auditStatus = 1; // 通过
        this.$confirm('是否确定通过?', this.$t('add.add140'), {
          confirmButtonText: this.$t('add.add142'),
          cancelButtonText: this.$t('add.add203'),
          type: 'warning',
        })
          .then(async () => {
            this.$http
              .put('sys/organized/update', form)
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg);
                } else {
                  this.$message.success(this.$t('personOriginationInfo.xinxi19'));
                  this.getList();
                }
              })
              .catch((err) => {
                console.log('err', err);
              });
          })
          .catch((err) => {
            console.log('err==>', err);
            this.$message({
              type: 'info',
              message: this.$t('add.add145'),
            });
          });
      } else if (command.command == 'b') {
        form.auditStatus = 2; // 拒绝
        this.$confirm('是否确定拒绝?', this.$t('add.add140'), {
          confirmButtonText: this.$t('add.add81'),
          cancelButtonText: this.$t('add.add203'),
          type: 'warning',
        })
          .then(async () => {
            this.$http
              .put('sys/organized/update', form)
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg);
                } else {
                  this.$message.success(this.$t('personOriginationInfo.xinxi20'));
                  this.getList();
                }
              })
              .catch((err) => {
                console.log('err', err);
              });
          })
          .catch((err) => {
            console.log('err==>', err);
            this.$message({
              type: 'info',
              message: this.$t('add.add145'),
            });
          });
      }
    },
    beforeHandleCommand(id, command) {
      return {
        id: id,
        command: command,
      };
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/jpg' ||
        file.type === 'image/bmp' ||
        file.type === 'webp';
      const isLt2M = file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        return this.$message.error(this.$t('institutionSetting.jigou66'));
      }
      if (!isLt2M) {
        return this.$message.error(this.$t('institutionSetting.jigou67'));
      }
    },
    handleelchange(file, fileList) {
      const formData = new FormData();
      fileList.map((item) => {
        formData.append('file', item.raw, Date.now() + '.jpeg');
      });
      this.$http
        .post('/tools/upload', formData)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.form.businessLicenseFile = res.data.filepath;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    handleelchange2(file, fileList) {
      const formData = new FormData();
      fileList.map((item) => {
        // fileList本来就是数组，就不用转为真数组了
        formData.append('file', item.raw, Date.now() + '.jpeg'); // 将每一个文件图片都加进formdata
      });
      this.$http
        .post('/tools/upload', formData)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.form.medicalLicenseFile = res.data.filepath;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    handleelchange3(file, fileList) {
      const formData = new FormData();
      fileList.map((item) => {
        // fileList本来就是数组，就不用转为真数组了
        formData.append('file', item.raw, Date.now() + '.jpeg'); // 将每一个文件图片都加进formdata
      });
      this.$http
        .post('/tools/upload', formData)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.form.statementFile = res.data.filepath;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    close() {
      this.form = {
        organizedName: '',
        deptName: '',
        socialCreditCode: '',
        registerNo: '',
        address: '',
        contact: '',
        mobile: '',
        businessLicenseFile: '', // 营业执照
        medicalLicenseFile: '', // 医疗机构
        statementFile: '', // 声明函
        name: '',
        auditStatus: '',
      };
      this.dataTime = [];
      this.dialogVisible = false;
    },
    submit() {
      if (!this.form.deptName) {
        return this.$message.error(this.$t('institutionSetting.jigou107'));
      } else if (this.form.businessLicenseFile == '') {
        return this.$message.error(this.$t('institutionSetting.jigou69'));
      } else if (this.form.socialCreditCode == '') {
        return this.$message.error(this.$t('institutionSetting.jigou73'));
      } else if (this.form.medicalLicenseFile == '') {
        return this.$message.error(this.$t('institutionSetting.jigou106'));
      } else if (this.form.registerNo == '') {
        return this.$message.error(this.$t('institutionSetting.jigou72'));
      }
      this.form.id = this.form.deptId;
      this.$http
        .put('/sys/organized/updateBackDept', this.form)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.dialogVisible = false;
            this.$message.success(this.title + '成功');
            this.form = {
              organizedName: '',
              deptName: '',
              socialCreditCode: '',
              registerNo: '',
              address: '',
              contact: '',
              mobile: '',
              businessLicenseFile: '', // 营业执照
              medicalLicenseFile: '', // 医疗机构
              statementFile: '', // 声明函
              name: '',
              auditStatus: '',
            };
            this.getList();
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    toDetail(id) {
      this.$http
        .get(`/sys/organized/getBackDept?deptId=${id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.$refs.zsDetail.form = res.data;
            this.$refs.zsDetail.dialogTableVisible = true;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 重置
    resetClick() {
      this.form = {
        workNo: '',
        workOrderType: '',
        statusName: '',
        createDate: '',
        delFlag: ''
      };
      this.page = 1;
      this.total = 0;
      this.getList();
    },
    // 搜索
    getPatientList() {
      this.getList();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss">
.person_homeView {
  height: 100%;

  .el-header {
    color: #333;
  }

  .el-aside {
    background-color: transparent;
    // color: #333;
    text-align: center;

    // padding-left: 12px;
    // line-height: 200px;
    .el-menu {
      border: none;
    }
  }

  .el-main {
    background-color: #f8f8f8;
    // color: #333;
    text-align: left;
    padding: 10px !important;
  }

  .el-container {
    height: 100%;
  }

  .nav_back {
    margin-top: 15px;
    padding-left: 5px;

    .title {
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: #4884e5;
    }
  }
}

.el-menu-item.is-active {
  background-color: #e6ecf0 !important;
}

.el-dropdown-link {
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: #003e67;
}

.partner_inner {
  margin-top: 20px;
}

.dissolution_box{
  p{
    line-height: 30px;
  }
}
</style>
